<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,html { width:100%; height:100%; margin:0;}
#mapDiv { height:100%; width:100%; }
#gpxlist { position:absolute; left:70px; top:5px; z-index:1100; }
#debug { position:absolute; left:70px; top:30px; z-index:1100; }
#copyright { position:absolute; right:0; bottom:0; z-index:1100; display:none;}
</style>
<title>轨迹地图 - 天地图</title>
</head>
<body>
<div id="mapDiv"></div>
<div id="debug"></div>
<div id=copyright>&copy; 2018 海天鹰版权所有</div>
<script src="http://api.tianditu.com/js/maps.js"></script>
<script>
function $id(s) { return document.getElementById(s); }

var isFirst = true;
var lng,lat;

var map = new TMap("mapDiv");
//允许鼠标双击地图放大
map.enableDoubleClickZoom()
//允许鼠标滚轮缩放地图
map.enableHandleMouseScroll();
//设置显示地图的中心点和级别
map.centerAndZoom(new TLngLat(116.40969,39.89945),14);

var marker = new TMarker(new TLngLat(116.40969,39.89945));
map.addOverLay(marker);

//缩放平移控件
var config = {
	type : "TMAP_NAVIGATION_CONTROL_LARGE",   //缩放平移的显示类型
	anchor : "TMAP_ANCHOR_TOP_LEFT",          //缩放平移控件显示的位置
	offset : [0,0],                           //缩放平移控件的偏移值
	showZoomInfo : true                       //是否显示级别提示信息，true表示显示，false表示隐藏。
};
var control = new TNavigationControl(config);
map.addControl(control);

//地图类型控件
var control = new TMapTypeControl();
//将地图类型控件添加到地图上
map.addControl(control);
//设置地图类型控件在地图上显示的位置，默认为在右侧，注：将控件加载到map之后再做此配置
// control.setLeft(10);
// control.setTop(20);

//比例尺控件
var control = new TScaleControl();
map.addControl(control);

var geo_option = {
	enableHighAccuracy: true,	//是否使用高精度设备获取值，gps>wifi>ip
	maximumAge: 2000,        	//表示浏览器重新获取位置信息的时间间隔
	timeout: 5000        		//设定请求超时时间
};

function getLocation() {
	if (navigator.geolocation) {
		navigator.geolocation.watchPosition(geo_success, geo_error, geo_option);
    	//navigator.geolocation.getCurrentPosition(showPosition, showError);
	} else {
		$id("debug").innerHTML = "GeoLocation not support!";
	}
}

function geo_success(position) {	
	//console.log(position);
	var coords = position.coords;	
	points = [];
	if(isFirst){
		isFirst = false;
		lng = coords.longitude;
		lat = coords.latitude;
	}	
    points.push(new TLngLat(lng,lat));
    points.push(new TLngLat(coords.longitude, coords.latitude));
	var polyline = new TPolyline(points, { strokeColor:"green", strokeWeight:2, strokeOpacity:1});
    map.addOverLay(polyline);
	marker.setLngLat(points[1]);

	map.panTo(new TLngLat(coords.longitude, coords.latitude));
	var time = new Date(position.timestamp);
	$id("debug").innerHTML = "经度：" + coords.latitude + "<br>维度：" + coords.longitude + "<br>误差：" + coords.accuracy + "米<br>速度：" + coords.speed + "<br>" + time.getFullYear() + "/" + (time.getMonth() + 1) + "/" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
	lng = coords.longitude;
	lat = coords.latitude;
}

function geo_error(error) {	
	$id("debug").innerHTML = error.message;
	/*
	switch(error.code) {
    case error.PERMISSION_DENIED:
		$id("msg").innerHTML = "Geolocation.PERMISSION_DENIED"
		break;
    case error.POSITION_UNAVAILABLE:
		$id("msg").innerHTML = "Geolocation.POSITION_UNAVAILABLE"
		break;
    case error.TIMEOUT:
		$id("msg").innerHTML = "The request to get user location timed out."
		break;
    case error.UNKNOWN_ERROR:
		$id("msg").innerHTML = "An unknown error occurred."
		break;
    }
	*/
}
						  
getLocation();
</script>
</body>
</html>